<template>
  <div>
    <div v-if="!requests || !requests.length" class="text-light-dark">
      {{ emptyText }}
    </div>
    <div v-else class="overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr class="border-b border-dark">
            <th class="py-2 px-4 text-left">方法</th>
            <th class="py-2 px-4 text-left">URL</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(request, index) in requests"
            :key="request._id || index"
            class="border-b border-dark"
          >
            <td class="py-2 px-4">
              <span :class="getMethodClass(request)">{{ request.method }}</span>
            </td>
            <td class="py-2 px-4 font-mono text-sm">{{ request.url }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Request {
  _id: string;
  service_id: string;
  request_type: 'ingress' | 'egress';
  method: string;
  url: string;
  created_at: string;
}

const props = defineProps<{
  requests: Request[];
  emptyText: string;
}>();

// 获取方法对应的样式类
const getMethodClass = (request: Request) => {
  if (!request || !request.method) return 'badge badge-yellow';
  
  return {
    'badge badge-blue': request.method === 'GET',
    'badge badge-green': request.method === 'POST',
    'badge badge-purple': request.method === 'PUT',
    'badge badge-orange': request.method === 'DELETE',
    'badge badge-yellow': !['GET', 'POST', 'PUT', 'DELETE'].includes(request.method)
  };
};
</script>
